<template>
  <div class="goods-btn">
    <div class="bar-left bar-item">
      <div>
        <i class="iconfont icon">&#xe667;</i>
        <span>联系客服</span>
      </div>
      <div>
        <i class="iconfont icon">&#xe739;</i>
        <span>分享</span>
      </div>
      <div>
        <router-link to="/shopcar">
          <i class="iconfont icon">&#xe70b;</i>
          <span>购物车</span>
        </router-link>
      </div>
    </div>
    <div class="bar-item bar-right">
      <div class="cart" @click="addToCart">加入购物车</div>
      <div class="buy">立即购买</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsButton',
  methods: {
    addToCart () {
      this.$emit('addToCart')
    }
  }
}
</script>

<style lang='scss' scoped>
.goods-btn{
  z-index: 999;
  height: 52px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  box-shadow: 0px -1px 4px rgba(0, 0, 0,.1);
}
.bar-item{
  flex: 1;
  display: flex;
}
.bar-item>div{
  flex: 1;
  font-size: .2rem;
  text-align: center;
}
.bar-left .icon{
  display: block;
  width: 22px;
  height: 22px;
  font-size:1.8rem;
  margin: .52rem auto .04rem;
}
.bar-right{
  text-align: center;
  line-height: 52px;
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
}
.cart{
  background-color: rgb(255, 126, 5);
  color:#fff
}
.buy{
  background-color: red;
}
</style>
